//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用组件页面
import PageA from '@/components/PageA.vue';
// import ZiZi from '@/components/ZiZi.vue';
import SunSun from '@/components/SunSun';
import PageB from '@/components/PageB.vue';
import PageB2 from '@/components/PageB2.vue';
import PageB3 from '@/components/PageB3.vue';
import PageC from '@/components/PageC.vue';
import Home from '@/App.vue';
// console.log('66666');
//定义routes路由的集合，数组类型
const ZiComponente = () => import(/*webpackChunkName: "ZiComponente"*/'@/components/ZiZi.vue')
const routes = [
    //单个路由均为对象类型，path代表的是路径，component代表组件
    // { path: "*", component: PageC,name:'404' },
    // { path: "*", redirect: '/page3', name: '404' },
    { path: '/', component: Home, name: "home", },
    { path: '/zizi', component: ZiComponente, name: "ZiZi",
    // beforeEnter: (to, from, next) => {
    //     console.log('beforeEnter=to=>',to);
    //     console.log('beforeEnter=from=>',from);
    //     console.log('beforeEnter=next=>',next);
    //     next()
    // },
},
    { path: '/sunsun', component: SunSun, name: "SunSun",  },
    { path: '/page1/:age', component: PageA, name: "aCompontent", alias: '/wuwuwu', meta: { keepAlive: true } },
    { path: "/page2", component: PageB, name: "bCompontent" },
    { path: "/page22", component: PageB2, name: "b2Compontent" },
    { path: "/page23", component: PageB3, name: "b3Compontent" },
    { path: "/page3", component: PageC, name: '404' },
    // { path: "*", component: PageC, name: '404' },

    //404
    //方式一：保留错误的url（推荐）
    //  { path: "*", component: PageC,name:'404' },
    //方式二：不保留错误的url 直接重定向
    //  { path: "/page3", component: PageC, name:'404'  },
    //  { path: "*",  redirect: '/page3'},
    //方式三：路由守卫
    // router.beforeEach((to,from,next)=>{
    //     if(to.matched.length === 0){
    //         // next({ path: '/page3' })
    //         //或者  
    //         next({ name: '404' })
    //     }else{
    //         next()
    //     }
    // })
]

//实例化 VueRouter 并将 routes 添加进去
const router = new VueRouter({
    mode: 'history',
    routes,
    // scrollBehavior(to,from,savedPosition){
    //     console.log("to-->",to);
    //     console.log("to.hash=============>",to.hash);
    //     console.log("from-->",from);
    //     console.log("savePosition-->",savedPosition);
    //     // return { x: 0, y: 1000 }
    //     // if (savedPosition) {
    //     //     return { x: 0, y: 1000, behavior: 'smooth'}
    //     //   } else {
    //     //     return { x: 0, y: 0 }
    //     //   }
    //     if (to.hash) {
    //         return {
    //           selector: to.hash,
    //           behavior: 'smooth',
    //         }
    //       }
    // }
});
// router.beforeResolve((to,from,next)=>{
//     console.log('=beforeResolve=to=>',to );
//     console.log('=beforeResolve=from=>',from );
//     console.log('=beforeResolve=next=>',next );
//     // next()
//     if(to.matched.length===0){
//         next({
//             path: '/page3',
//             name: '404'
//         })
//     }else{
//         next()
//     }
// })
// router.afterEach((to, from) => {
//     console.log('=afterEach=to=>',to );
//     console.log('=afterEach=from=>',from );
//   })
// router.beforeEach((to,from,next)=>{
//     console.log('beforeEach=to=>',to);
//     console.log('beforeEach=from=>',from);
//     // console.log('beforeEach=next=>',next);
//     next()
//     // if(to.matched.length === 0){
//     //     // next({ path: '/page3' })
//     //     //或者  
//     //     next({ name: '404' })
//     // }else{
//     //     next()
//     // }
// })

// router.beforeResolve((to,from,next)=>{
//     console.log('beforeResolve=to=>',to);
//     console.log('beforeResolve=from=>',from);
//     // console.log('beforeResolve=next=>',next);
//     next()
// })
// router.afterEach((to,from)=>{
//     console.log('afterEach=to=>',to);
//     console.log('afterEach=from=>',from);
// })
//抛出这个这个实例对象方便外部读取以及访问
export default router